<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
				/*要保证body的高度最小等于视窗高度*/
				/*body的高度默认为内容高度*/
				background-color: beige;
				/* border: 20px red solid; */
				min-height: 100vh;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
			}
			
			
			.head,.foot{
				height: 80px;
				background-color: coral;
			}
			
			.main{
				flex-grow: 1;
				display: flex;
			}
			
			.left,.right{
				width: 120px;
				background-color: aquamarine;
			}
			
			.content{
				flex-grow: 1;
			}
		</style>
	</head>
	<body>
		<!--
			1、对齐问题   
			2、布局问题  
		-->
		<div class="head">头部</div>
		<div class="main">
			<div class="left">左侧</div>
			<div class="content">内容</div>
			<div class="right">右侧</div>
		</div>
		<div class="foot">底部</div>
	</body>
</html>
